<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js">
		</script>
	</head>
	<body>
		<!-- 组件对象要在Vue 对象之前 否者会出现 组件没有被找到  -->
		<!-- 在这里为什么 不能使用var 定义一个全局变量 因为每一个组件的data 是不相关的  -->
		<template id="tmp">
			<div>
				<label>
					<input type="button" value="+1" @click="add" />
					<h1 style="color: #FF69B4;">{{count}}</h1>
					<hr>
				</label>
			</div>

		</template>
		<div id="app">
			<counter></counter>
			<counter></counter>
			<counter></counter>
		</div>
		<script>
			var count = {
				count: 0
			}
			Vue.component('counter', {
				template: "#tmp",
				data: function() {
					return {count:0}
					/* retunn  count*/
				},
				methods: {
					add(){
						this.count++;
						/* count.count++ */
					}
				}
			})
			new Vue({
				el: '#app',
				data: {},
				methods: {}

			})
			

		</script>
	</body>
</html>
